<docs>
</docs>
<template>
  <div v-show="hasInitEvent" class="position" @click.stop>
    <my-bread :title="labName"></my-bread>
    <textarea class="weui-textarea" v-model="labelName" placeholder="请输入" />
    <div class="btn-wrap">
      <button class="weui-btn_primary" @click.prevent="getTextarea">确定</button>
      <button class="weui-btn_default" @click.prevent="backBase()">取消</button>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    hasInitEvent: {
      type: Boolean,
      default: false
    },
    labName:String,
    labelName:String
  },
  data() {
    return {
    };
  },
  methods: {
    backBase() {
      this.$emit('update:hasInitEvent', false);
    },
    // 点击确定返回内容
    getTextarea() {
      this.$emit('update:labelName', this.labelName);
      this.$emit('update:hasInitEvent', false);
    }
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}

.position {
  position: fixed;
  top: 114px;
  left: 0;
  background-color: #fff;
  z-index: 11;
  width: 100%;
  height: 100%;
  .weui-textarea{
    height: 400px;
    width: 96%;
    padding: 5px;
    margin: 20px 2%;
    box-sizing: border-box;
    border-radius:5px;
    background: #f3f1f1;
  }
  .btn-wrap{
    height: 80px;
    text-align: center;
    button {
      display: inline-block;
      width: 47%;
      height: 80px;
      line-height: 80px;
      margin: 0 5px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 10px;
    }
    .weui-btn_primary{
      color: #fff;
      background-color: #06A8F6;
    }
    .weui-btn:after {
      height:198%;
      width: 198%;
    }
  }
}
</style>
